<template>
  <div :class="item.config.class">
    <template v-if="item.config['model'] == 'appModel3'">
      <div class="banner-content">
        <img class="banner-image" :src="`${vuex_h5Config.backgroundImg}?_=${Date.now()}`" crossorigin="anonymous">
        <div class="banner-info">
          <div class="info-title" :prop-data="getModelItemConfig('title')" 
            :style="{
              'font-family': setAttr(item['title'], 'fontFamily'),
              'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['title'], 'color'),
            }" @click.stop="editModel(item['title'])">{{setAttr(item['title'], 'text')}}</div>
          <div class="info-time" :prop-data="getModelItemConfig('time')" 
            :style="{
              'font-family': setAttr(item['time'], 'fontFamily'),
              'font-size': item['time'] ? $px2rem(`${item['time'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['time'], 'color'),
            }" @click.stop="editModel(item['time'])">
              活动时间：
            {{vuex_activity.startingTime ? `${vuex_activity.startingTime} ~ ` : '' }} {{vuex_activity['endTime']}}
          </div>
        </div>
      </div>
    </template>
    <template v-if="item.config['model'] == 'appModel5'">
      <div class="banner-content">
        <img class="banner-image" :src="vuex_h5Config.backgroundImg" crossorigin="anonymous">
        <div class="banner-info">
          <div class="info-title" :prop-data="getModelItemConfig('title')" 
            :style="{
              'font-family': setAttr(item['title'], 'fontFamily'),
              'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['title'], 'color'),
            }" @click.stop="editModel(item['title'])">{{setAttr(item['title'], 'text')}}</div>
          <div class="info-time" :prop-data="getModelItemConfig('time')" 
            :style="{
              'font-family': setAttr(item['time'], 'fontFamily'),
              'font-size': item['time'] ? $px2rem(`${item['time'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['time'], 'color'),
            }" @click.stop="editModel(item['time'])">
            活动时间：
            {{vuex_activity.startingTime ? `${vuex_activity.startingTime} ~ ` : '' }} {{vuex_activity['endTime']}}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin'
import { bannerModel } from '@/formgen/components/FormConfig/model-config'
import { mapGetters } from 'vuex'
import { getImageFromUrl } from '@/utils/tools'
export default {
  name: 'DBanner',
  mixins: [mixin],
  computed: {
    ...mapGetters(['vuex_activity', 'vuex_h5Config'])
  },
  data(){
    return {
      bannerModel: JSON.parse(JSON.stringify(bannerModel)),
      activeInfo: {}
    }
  },
  methods: {
    getImageFromUrl(url){
      getImageFromUrl()
    },
    setAttr(config, key){
      if(!config) return null
      return config.configH5[key]
    },
    getModelItemConfig(key){
      let _self = this
      let {activityName} = _self.vuex_activity
      let config = _self.formItem[key]
      if( key == 'title' && ['保养四合一', '保养买四送一'].includes(config['configH5']['text']) ){
        config['configH5']['text'] = activityName
      }
      if(key == 'title' && !config['configH5']['text']){
        config['configH5']['text'] = activityName
      }
      _self.$set(_self.item, key, config)
    },
    editModel(item){
      this.$emit('edit-model', item)
    },
  },
}
</script>

<style scoped lang="scss">
  .app-model-3.banner-model{
    position: relative;
    margin: 0;
    .banner-image{
      display: block;
      width: 100%;
      height: auto;
    }
    .banner-content{
      position: relative;
      .banner-info{
        position: absolute;
        left: 0;
        right: 0;
        top: 45%;
        text-align: center;
        .info-title{
          font-weight: bold;
        }
        .info-time{
          margin-top: rem(40);
        }
      }
    }
  }
  .app-model-5.banner-model{
    position: relative;
    margin: 0;
    .banner-image{
      display: block;
      width: 100%;
      height: auto;
    }
    .banner-content{
      position: relative;
      .banner-info{
        position: absolute;
        left: 0;
        right: 0;
        top: rem(200);
        text-align: center;
        .info-title{
          font-weight: bold;
        }
        .info-time{
          margin-top: rem(30);
        }
      }
    }
  }
</style>
